/**
 * Created by shc on 16/12/20.
 */
var React = require('react');


var Header = require('../widget/Header');
var Brand = require('../widget/Brand');
var TabContent = require('../widget/TabContent');
var Footer = require('../widget/Footer');
var ajax = require('../tools/ajax');
var MD5 = require('../../web/tools/MD5');
var SearchShop = require('./searchShop');

module.exports = React.createClass({
    getInitialState: function () {
        return {
            theme:"Default", //Default/Blue
            banner:[],
            func:[],//功能列表
            imgList:"",//
            hotGoods:[],//热销商品
            bestGoods:[],//潮品商品
        }
    },
    myScroll:"",

    componentDidMount: function () {
        this.getBanner();
        this.getFunction();
        this.getHomePagePro();
        setTimeout(this.swiper,1000);

    },
    componentDidUpdate(){
        setTimeout(this.iscroll,800);
    },
    /**iScroll插件*/
    iscroll(){
        var p =this;
        p.myScroll = new IScroll("#mainWrapper",{
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        });
        p.myScroll.refresh();
        document.addEventListener('touchmove', function(){}, false);
    },
    /**轮播*/
    swiper(){
        var swiper = new Swiper('.swiper-container', {
            //pagination: '.swiper-pagination',
            loop:true,
            autoplay:2000,
            initialSlide :0,
        });
    },
    temp:-1,
    //action:function () {
    //    window.location.reload(true);
    //},
    /**banner跳转*/
    banner(e){
        var p=this;
        var id = e.currentTarget.getAttribute("data-id");
        location.href = "#shop_pro/0/"+id;
    },
    /**功能列表跳转*/
    classify(e){
        var p=this;
        var action = e.currentTarget.getAttribute("action");
        var tn = e.currentTarget.getAttribute("data-tn");
        if(action=="#section_pro"){
            location.href = "#section_pro/"+tn;
        }else{
            location.href= action;
        }
    },
    /**获取banner列表*/
    getBanner:function(){
        var p = this;
        ajax("POST","getBanner",{},function(dt){
            if(dt && dt.success){
                var objs = dt.data;
                console.log(objs);
                p.setState({banner:objs});
            }
        });
    },
    /**获取功能列表*/
    getFunction(){
        var p = this;
        ajax("POST","getFunction",{},function(dt){
            if(dt && dt.success){
                var objs = dt.data;
                console.log(objs);
                p.setState({func:objs});
            }
        });
    },
    getHomePagePro(){
        var p = this;
        ajax("POST","getHomePagePro",{flag:"is_hot"},function(dt){
            if(dt && dt.success){
                var objs = dt.data;
                console.log(objs);
                p.setState({hotGoods:objs});
            }
        });
        ajax("POST","getHomePagePro",{flag:"is_best"},function(dt){
            if(dt && dt.success){
                var objs = dt.data;
                console.log(objs);
                p.setState({bestGoods:objs});
            }
        });
    },
    /**商品详情*/
    proInfo: function (e){
        var id = e.currentTarget.getAttribute("data-id");
        location.href = "#goodDetail/"+id;
    },
    render: function () {
        var p =this;
        var bannerList = p.state.banner.map(function(obj,index){
            return (
                <div key={index} className="mf-t" onClick={p.banner} data-id={obj.Id}>
                    <img src={obj.banner_img} style={{width:"1.9rem",height:"1.9rem"}}/>
                    <div className="ft-s">{obj.banner_name}</div>
                </div>
            )
        });
        var funcList = p.state.func.map(function(obj,index){
            return (
                <div key={index} className={"classify "+(index<2?"top ":"")+(index%2==0?"left":"")} onClick={p.classify} action={obj.action}  data-tn={obj.table_name}>
                    <div className="classify-t">
                        <div className={index<2?"text-gradient":"txtNormal"}>{obj.name}</div>
                        <div className="">{obj.module_description}</div>
                    </div>
                    <img src={obj.ico}/>
                </div>
            )
        });
        var hotGoodsList = p.state.hotGoods.map(function(obj,index){
            if(obj.goods_img) {
                var goods_img = obj.goods_img.split(",")[0];
            }
            return(
               <div key={index} className="box" onClick={p.proInfo} data-id={obj.id}>
                   <div className="good_img"><img src={goods_img} alt=""/></div>
                   <div className="goods_t">{obj.goods_name}</div>
                   <div className="goods_desc">{obj.goods_desc}</div>
               </div>
            )
        });
        var bestGoodsList = p.state.bestGoods.map(function(obj,index){
            if(obj.goods_img) {
                var goods_img = obj.goods_img.split(",")[0];
            }
            return(
                <div key={index} className="box" onClick={p.proInfo} data-id={obj.id}>
                    <div className="good_img"><img src={goods_img} alt=""/></div>
                    <div className="goods_t">{obj.goods_name}</div>
                    <div className="price">&yen;{obj.ProPrice}</div>
                </div>
            )
        });
        var shopInfo = localStorage.getItem("shopInfo");
        return (
            <div className="main" id="main">
                <Header ref="header" nearby={p.nearby} theme={p.state.theme} actionType="ewm" icon="#icon-saoyisao" flag={true}></Header>
                <div id="mainWrapper" className="container-t wrap">
                    <div style={{minHeight:"28.66rem"}}>
                        <div className="swiper">
                            <div className="lunbo" >
                                <div className="bg" style={{width:"100%",height:"auto",margin:"0 auto",overflow:"hidden"}}>
                                    <div className="swiper-container" style={{height:"auto"}}>
                                        <div className="swiper-wrapper">
                                            <div className="swiper-slide">
                                                <img src="http://115.29.198.39:8080/upload/cw_lunbo/100558661826374645.jpg" />
                                            </div>
                                            <div className="swiper-slide">
                                                <img src="http://115.29.198.39:8080/upload/cw_lunbo/630656125432820393.jpg" />
                                            </div>
                                        </div>
                                        <div className="swiper-pagination"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="mainFunction">
                            {bannerList}
                        </div>
                        <hr />
                        <div>
                            {funcList}
                        </div>
                        <hr />
                        <div className="mainHead">
                            <div className="h1">
                                <span>热销产品</span>
                            </div>
                            <div className="column hot">
                                <div className="goods">
                                    <div className="goodsList">
                                        {hotGoodsList}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="mainHead">
                            <div className="h1">
                                <span>潮品推荐</span>
                            </div>
                            <div className="column">
                                <div className="goods">
                                    <img src="http://115.29.198.39:8080/upload/cw_otherbanner/813872538284329264.jpg" alt=""/>
                                    <div className="goodsList">
                                        {bestGoodsList}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <Footer witchSelected="shouye"></Footer>
                <SearchShop ref="searchShop" action={this.action}/>
            </div>
        )
    }
});
